<template>
  <div>
    <a href="http://baidu.com">百度一下</a><br />
    <!-- v-bind绑定标签上的属性可以将其变为动态（“”中值按照js执行  变量或者表达式），可以简写为: -->
    <a v-bind:href="url">再百度一下</a>
    <a :href="url">再再百度一下</a>
    <hr />
    <h1>v-model</h1>
    <!-- 表单元素有哪些 input option select textarea -->
    <input type="text" v-model="msg" />
    <h1>{{ msg }}</h1>
    <!-- 收集表单数据 -->
    <!-- input -->
    <input type="text" v-model="inputInfo" />
    <!-- 文本域 -->
    <textarea cols="10" rows="10" v-model="textareaInfo"></textarea><br />
    <!-- type -->
    <!-- 多选框 type:checkbox -->
    <!-- 只有一个多选框时，初始值设计为布尔值 -->
    <input type="checkbox" name="" id="" v-model="cheBoxOneMsg" /><br />
    <!-- 设计初始值或者思考一些逻辑问题，就两个可能，永远就是往布尔值方面靠 -->
    <!-- 当多选框为多个时，初始值设计数组  例如：爱好：足球 篮球 乒乓球 -->
    <input
      type="checkbox"
      name=""
      id="zuqiu"
      value="足球"
      v-model="cheBoxManyMSg"
    />
    <!-- 足球 -->
    <label for="zuqiu">足球</label>
    <input
      type="checkbox"
      name=""
      id="lanqiu"
      value="篮球"
      v-model="cheBoxManyMSg"
    />
    <label for="lanqiu">篮球</label>
    <input
      type="checkbox"
      name=""
      id="pingpangqiu"
      value="乒乓球"
      v-model="cheBoxManyMSg"
    />
    <label for="pingpangqiu">乒乓球</label><br />
    <!-- radio数据如何收集 初始值设计为空串-->
    <input type="radio" name="sex" id="man" value="1" v-model="radioInfo" />
    <label for="man">男</label>
    <input type="radio" name="sex" id="woman" value="2" v-model="radioInfo" />
    <label for="woman">女</label>
    <br />
    <!-- select既可以单选也可以多选 -->
    <!-- 下拉列表如果是单选初始值设计为空串 -->
    <select name="" id="" v-model="selectOne">
      <!-- 注意：第一个options属性上添加disabled 禁用 -->
      <option value="" disabled>请选择</option>
      <option value="111">1111</option>
      <option value="222">2222</option>
      <option value="333">3333</option></select
    ><br />

    <select name="" id="" multiple v-model="selectMany">
      <option value="" disabled>请选择</option>
      <option value="111">1111</option>
      <option value="222">2222</option>
      <option value="333">3333</option>
    </select>
    <!-- 值绑定 -->
    <!-- 需求是checkbox单选状态 默认值 true false   我需求：yes代替true no代表false -->
    <input
      type="checkbox"
      name=""
      id=""
      v-model="checkboxMsg"
      true-value="lele"
      false-value="fuhao"
    />
    <input type="radio" name="" id="" :value="msg1" v-model="radioMsg" />
    <input type="text" v-model="msg1" />
    <button @click="getFormMsg">获取form表单的值</button>
  </div>
</template>

<script>
export default {
  /* 
    注：在template
    设计初始值时：
    字符串：''
    数字：0
    布尔值：true/false
    数组：[]
    对象：{}
    
    */
  data() {
    return {
      url: "http://baidu.com",
      msg: "我们班男生都很帅！！",
      inputInfo: "",
      textareaInfo: "请输入...",
      cheBoxOneMsg: true,
      cheBoxManyMSg: [],
      radioInfo: "",
      selectOne: "",
      selectMany: [],
      checkboxMsg: "",
      radioMsg: "",
      msg1: "",
    };
  },
  methods: {
    getFormMsg() {
      //   console.log(this.inputInfo);
      //   获取到这些值之后， 根据ajax的接口，按照其要求，发送给服务器
      //获取文本域的值
      /*  console.log(this.textareaInfo);
      console.log(this.cheBoxOneMsg);
      console.log(this.cheBoxManyMSg);
      console.log(this.radioInfo);
      console.log(this.selectOne);
      console.log(this.selectMany); */
      //   console.log(this.checkboxMsg);
      console.log(this.radioMsg);
    },
  },
};
</script>

<style lang="scss" scoped>
</style>